<template>
    <div class="avatar">
        <img :src="imageUrl" alt="Avatar" class="avatar-image">
    </div>
</template>

<script setup>
import { reactive, toRefs } from 'vue'
let props = defineProps({
    imageUrl: {
        type: String,
        required: true
    },
    size: {
        type: String,
        default: '50px'
    }
})

const { imageUrl, size } = toRefs(props)

const state = reactive({
    circleUrl:
        'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    squareUrl:
        'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
    sizeList: ['small', '', 'large']
})

const { circleUrl, squareUrl, sizeList } = toRefs(state)



</script>

<style scoped>
.avatar {
    --avatar-size: v-bind(props.size);

    width: var(--avatar-size);
    height: var(--avatar-size);
    border-radius: 50%;
    /* 让div呈现圆形 */
    overflow: hidden;
    /* 隐藏图片超出圆形的部分 */
    position: relative;
    /* 用于绝对定位图片 */
}

.avatar-image {
    width: 100%;
    /* 图片宽度100%，保证图片在圆形中居中 */
    height: 100%;
    /* 图片高度100%，保证图片在圆形中居中 */
    object-fit: cover;
    /* 保持图片比例并填充整个div */
    position: absolute;
    /* 绝对定位，居中图片 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
</style>